<template>
  <el-carousel :interval="5000" arrow="always" height="500px">
    <el-carousel-item
      v-for="(item,index) in carouselItems"
      :key="index"
      class="carouselitem"
    >
      <a :href="'/#/News/' + item.newsId">
        <img
          :src="baseImgURL+item.newsTitlePic"
          alt="无法显示"
        />

        <!-- 有一个问题：就是img控件无法读出item项src的值 -->
        <!-- 解决方案为：直接imgurl里存的是图片的名称，通过字符串拼接拿到完整路径，而后直接进行跨域请求 -->

        
        <h3>{{ item.newsDescribe }}</h3>
      </a>
    </el-carousel-item>
  </el-carousel>
  
</template>


<style scoped>
.carouselitem {
  height: 100%;
}
.carouselitem > a {
  position: relative;
}
.carouselitem img {
  width: 100%;
  height: 100%;
}
.carouselitem h3 {
  color: #fff;
  font-size: x-large;
  font-weight: 600;
  opacity: 0.75;
  display: inline-block;
  line-height: 120%;

  /* height: 10%;
   */
  width: 80%;
  text-align: center;
  /* margin-top: 50%;
  margin-left: 20%; */
  position: absolute;
  top: -200%;
  left: 10%;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>


<script>
export default {
  data: () => ({
    baseImgURL:'http://121.196.246.105:4000/News/TitlePic/'
  }),
  computed: {
    getCarousel() {
      let queryindex = 0;
      if (this.$route.params.id != null) {
        queryindex = this.$route.params.id;
      }
      console.log(
        this.$store.getters.getcarousels.filter(
          (c) => c.newsCategoryId == queryindex
        )
      );
      return this.$store.getters.getcarousels.filter(
        (c) => c.newsCategoryId == queryindex
      );
    },
  },
  props:{
    carouselItems:{
      type:Array,
      required:true
    }
  }
};
</script>

<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>